<template>
    <div>
        <!-- 查询区域 -->
        <Row style="margin:5px 0px 7px 5px">
            <i-col span="2" >
                <Button  size="default"  type="primary" @click="btn_refresh">刷新</Button>
            </i-col>
            <i-col  span="2">
                <Button  size="default"  type="primary"  @click="create_pv" >创建PV</Button>
            </i-col>
            <i-col  span="3">
                <Button  size="default"  type="error" @click="multi_del_pv" >批量删除</Button>
            </i-col>
            <i-col span="6" >
                <i-input size="default" v-model="pv_name"  search   placeholder="输入PV名字" @on-enter="btn_enter" >
                    <Button  size="default"  slot="append"  icon="md-search" @click="btn_select_pv"></Button>
                </i-input>
            </i-col>
        </Row>
        <i-table size="default"   border stripe ref="pv_table"  @on-selection-change="onSelect" :columns="format" :data="show_list" :height="sharedState.tableHeight" >
            <template slot-scope="{ row, index }" slot="action">
                <Button  size="default"  type="error"   @click="del_pv(index)">删除</Button>
            </template>
        </i-table >
        <div style="text-align: center;margin-top: 10px;">
            <Page ref="page" :total="total" :page-size="pageSize"  @on-change="changePage" show-total/>
        </div>
        <!-- 创建PV模态框 -->
        <Modal v-model="show_create_pv_modal" width="800" draggable>
            <p slot="header" style="color:#f60;text-align:center">
                <span>创建PV</span>
            </p>
            <div style="width:90%">
                <Row :gutter="24">
                    <i-col span="12">
                        <Form :ref="pv" label-position="left"  :label-width="100">
                            <Form-Item label="名字:"  prop="name">
                                <Input type="text"  v-model="pv.name" />
                            </Form-Item>
                            <Form-Item label="大小(G):"  prop="capacity">
                                <Input type="number"  v-model="pv.capacity" />
                            </Form-Item>
                            <Form-Item label="访问模式:" prop="accessModes">
                                <Select v-model="pv.accessModes">
                                    <Option v-for="ac in access_mode_list" :key="ac" :value="ac">{{ ac }}</Option>
                                </Select>
                            </Form-Item> 
                            <Form-Item label="回收策略:" prop="reclaimPolicy">
                                <Select v-model="pv.reclaimPolicy">
                                    <Option v-for="rp in reclaim_policy_list" :key="rp" :value="rp">{{ rp }}</Option>
                                </Select>
                            </Form-Item> 
                            <Form-Item label="存储类名:"  prop="storageClassName">
                                <Input type="text"  v-model="pv.storageClassName" />
                            </Form-Item>
                            <Form-Item label="源:" prop="source">
                                <Select v-model="pv.source">
                                    <Option v-for="source in source_list" :key="source" :value="source">{{ source }}</Option>
                                </Select>
                            </Form-Item> 
                        </Form>
                    </i-col>
                    <i-col span="12">
                        <Form :ref="nfs" label-position="left"  :label-width="100">
                            <Form-Item label="nfs共享文件夹路径:"  prop="path">
                                <Input type="text"  v-model="nfs.path" />
                            </Form-Item>
                            <Form-Item label="nfs服务器地址:"  prop="server">
                                <Input type="text"  v-model="nfs.server" />
                            </Form-Item>
                            <Form-Item label="只读:" prop="readonly">
                                <i-switch v-model="nfs.readonly"  />
                            </Form-Item> 
                        </Form>
                    </i-col>
                </Row>
            </div>
            <div slot="footer">
                <Button  size="default"  type="primary"   @click="btn_create_pv">提交</Button>
            </div>
        </Modal>
    </div>
</template>

<script>

import {k8s_cluster_post} from '@/api/http'
import { 
    delete_multi_pv, 
    delete_pv,
    get_pv_list,
    create_pv,
    select_pv
} from  '@/api'
import { get_placement,show_simple_page } from '@/common/util'
import store from '@/store'

export default {
    data() {
        return {
            sharedState: store.state,
            format: [
                {
                    type: 'selection',align: 'center',width:60,fixed:'left',
                },
                {
                    title: '名字',key: 'name',align: 'center',width:250,fixed:'left',
                },
                {
                    title: '声明',key: 'claim',align: 'center',width:150,
                },
                {
                    title: '状态', key: 'status',align: 'center',width:150,
                },
                {
                    title: '容量',key: 'capacity',align: 'center',width:150,
                },
                {
                    title: '访问模式',key: 'access_modes',align: 'center',width:150,
                },
                {
                    title: '回收策略',key: 'pv_reclaim_policy',align: 'center',width:150,
                },
                {
                    title: '存储类名',key: 'storage_class_name',align: 'center',width:150,
                    render: (h,params) =>{
                        let value = params.row.storage_class_name
                        if(!value){
                            return h('p','无')
                        }else{
                            return h('p',value)
                        }
                    }
                },
                {
                    title: '源',key: 'source',align: 'center',width:150,
                    render : (h,params) => {
                        let source = params.row.source 
                        if (source == null ){
                            return   h('p','无')
                        }else{
                            let value = JSON.stringify(source,undefined,4)
                            let placement = get_placement(params)
                            return h('Poptip', {props:{'trigger':'hover','word-wrap':true,'placement':placement,content:value}},[
                                    h('a', '显示')
                            ]);

                        }
                    }
                },
                {
                    title: '创建时间',key: 'create_time',align: 'center',width:150,
                },
                {
                    title: '操作',slot: 'action',align: 'center',width:150,fixed:'right',
                }

            ],

            selecteds: [],
            // 创建pv
            show_create_pv_modal: false,
            access_mode_list:['ReadWriteMany','ReadWriteOnce'],
            reclaim_policy_list:['Retain','Delete'],
            source_list: ['nfs'],
            pv: {
                name: 'pv-rwx-nfs',
                capacity: 1,
                accessModes: 'ReadWriteMany',
                reclaimPolicy: 'Retain',
                storageClassName:'',
                source: 'nfs',
            },
            nfs: {
                path: '/NAS',
                server: '192.168.11.31',
                readonly: false,
            },
            rules:{
                name: [
                    { required: true, message: '请选择PV名称', trigger: 'blur' }
                ],
                capacity: [
                    { required: true, message: '请输入PV容量大小.', trigger: 'blur' },
                ],
            },
            // 分页
            total_list: [],
            show_list: [],
            total: 0,
            pageSize: 10,
            // 查询
            pv_name: '',
        }
    },
    methods: {
        btn_refresh(){
            this.refresh()
        },
        btn_enter(){
            return
        },
        // 查询
        btn_select_pv(){
            let name=this.pv_name.trim()
            let data = {
                "name": name
            }
            k8s_cluster_post(select_pv,data).then(response=>{
                show_simple_page(this,response)
            })
        },
        // 选项改变就会触发
        onSelect(selection){
            this.selecteds = selection;
            console.log(this.selecteds)
        },
        check(){
            if(this.selecteds.length == 0 ){
                this.$Message.error("请选择一项")
                return false
            }  
            return true
        },
        multi_del_pv() {
            if(!this.check()) return
            let data = []
            let has_bound = false
            for(let i=0;i<this.selecteds.length;i++){
                if (this.selecteds[i].status=="Bound") {
                    has_bound = true
                    break
                }
                data[i] = this.selecteds[i].name
            }
            if (has_bound) {
                this.$Message.error("bounding状态的pv无法直接删除,请去除后再删除")
                return
            }
            // console.log(data)
            let result = confirm("确定要删除"+data+"吗?")
            if(result == false) return 
            data = {"pv_list":data}
            k8s_cluster_post(delete_multi_pv,data).then( (response) => {
                console.log(response.data)
                let info = JSON.stringify(response.data)
                if(info.indexOf('ok') != -1) {
                    this.$Message.success('批量删除pv成功')
                    this.refresh()
                }else {
                    alert(info)
                }
            })
        },
        
        del_pv(index) {
            let status = this.show_list[index].status 
            if (status == "Bound") {
                this.$Message.error("bounding状态的pv无法直接删除,得先删应用")
                return
            }
            let name = this.show_list[index].name
            let result = confirm("确定要删除"+name+"吗?")
            if(result == false) return 
            let data= {"name":name}
            k8s_cluster_post(delete_pv,data).then( (response) => {
                let info = JSON.stringify(response.data)
                if(info.indexOf('ok') != -1) {
                    this.$Message.success('删除pv成功')
                    this.refresh()
                }else {
                    alert(info)
                }
            })
        },

        changePage(index) {
            let _start = (index -1) * this.pageSize
            let _end = index * this.pageSize
            this.show_list = this.total_list.slice(_start,_end)
        },
        // 创建pv事件
        create_pv(){
            this.show_create_pv_modal=true;
        },
        getRandomNum(){
            let temp= Math.floor(Math.random()*10000);
            temp=String(temp);
            if(temp.length!=4){
                let templen=4-temp.length;
                for(let i=0;i<templen;i++){
                    temp+="0";
                }	
            }
            return parseInt(temp);
        },
        btn_create_pv(){
            let name_postfix = this.getRandomNum()
            let pv_name = this.pv.name + "-"+name_postfix
            let capacity = this.pv.capacity
            if (capacity < 0 || capacity > 100){
                alert("大小在1-100之内")
                return
            }
            capacity += "Gi"


            let data=  {                
                "name":pv_name,
                "capacity":capacity,
                "accessModes":this.pv.accessModes,
                "reclaimPolicy": this.pv.reclaimPolicy,
                "storageClassName": this.pv.storageClassName,
                "source": this.pv.source,
                "nfs":this.nfs
            }
            k8s_cluster_post(create_pv,data).then( (response) => {
                let info = JSON.stringify(response.data)
                if(info.indexOf('ok') != -1) {
                    this.$Message.success('创建PV成功')
                    this.show_create_pv_modal = false
                    this.refresh()
                }else {
                    alert(info)
                }
            })

        },
        refresh() {
            this.selecteds = []
            k8s_cluster_post(get_pv_list).then( (response) => {
                show_simple_page(this,response)
            })
        },
    },
    mounted: function() {
        setTimeout(() =>{
            this.refresh();
        },200); 
    }
}
</script>
<style>
pre{
    white-space: pre-wrap!important;
    word-wrap: break-word!important;
    *white-space:normal!important;
}

</style>